<template>
    <div>
        <h2>汽车信息:</h2>
        <h3>汽车品牌：{{car.brand}}</h3>
        <h3>汽车价格：{{car.price}}</h3>
        <button @click="changePrice">修改汽车价格</button>
        <hr/>
        <h2>游戏列表：</h2>
        <ul>
            <li v-for="g in games" :key="g.id">
                {{g.name}}
            </li>
        </ul>
        <button @click="changeGameName">修改第一个游戏名</button>
        <hr/>
        <h4>测试： {{obj.a.b.c}}</h4>
    </div>
</template>

<script setup lang="ts" name="Person">
import {reactive} from "vue";
let car = reactive({
    brand: '奔驰',
    price: 100
})

let games = reactive([
    {id: 1,name: '王者荣耀'},
    {id: 2,name: '原神'},
    {id: 3,name: '火线'}
])

let obj = reactive({
    a: {
        b: {
            c: 666
        }
    }
})


function changePrice() {
    car.price += 10
}
function changeGameName() {
    games[0].name = '哈哈哈'
}

</script>

<style scoped>

</style>
